'use client'

import { useState } from 'react'
import { cancelReturn } from '@/actions/return'
import { SerializedReturn } from '@/types'

interface ReturnRecordsProps {
  returns: SerializedReturn[]
}

export function ReturnRecords({ returns }: ReturnRecordsProps) {
  const [submitting, setSubmitting] = useState(false)

  const handleCancelReturn = async (returnId: number) => {
    if (!confirm('确定要撤销此退货单吗？')) return

    try {
      setSubmitting(true)
      const result = await cancelReturn(returnId)
      if (!result.success) {
        alert(result.error)
      }
    } catch (error) {
      console.error('撤销退货失败:', error)
      alert('撤销退货失败')
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <div>
      <h2 className="text-lg font-medium text-gray-900 mb-4">退货记录</h2>
      <div className="bg-white shadow rounded-lg overflow-hidden">
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                退货单号
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                关联销售单
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                退货金额
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                退货商品
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                退货原因
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                退货时间
              </th>
              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                操作
              </th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {returns.map((returnOrder) => (
              <tr key={returnOrder.id} className="hover:bg-gray-50">
                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                  {returnOrder.code}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  {returnOrder.sale.code}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  ¥{parseFloat(returnOrder.totalAmount).toFixed(2)}
                </td>
                <td className="px-6 py-4 text-sm text-gray-500">
                  {returnOrder.items.map(item => (
                    <div key={item.id}>
                      {item.product.name} × {item.quantity}
                    </div>
                  ))}
                </td>
                <td className="px-6 py-4 text-sm text-gray-500">
                  {returnOrder.items.map(item => (
                    <div key={item.id}>{item.reason}</div>
                  ))}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  {new Date(returnOrder.createdAt).toLocaleString()}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                  <button
                    onClick={() => handleCancelReturn(returnOrder.id)}
                    disabled={submitting}
                    className="text-red-600 hover:text-red-900 disabled:opacity-50"
                  >
                    撤销
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
} 